<template>
  <div class="todo-footer">
          <label>
              <input type="checkbox" name="" id="" v-model="checkedAll">
          </label>
          <span><span>已完成{{count}}</span>/全部{{todos.length}}</span>
          <button class="btn btn-danger" @click="removeData">清除已完成任务</button>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent ,ref} from "vue";
import { Todo } from "../types/todo";
export default defineComponent({
  name: "HelloWorld",
  props: {
    todos:{
        type:Array as ()=>Todo[],
        required:true,
    },
    checkAll:{
        type:Function,
        required:true
    },
     clearData:{
        type:Function,
        required:true
    },
    
  },
  setup(props){
    const count =computed(()=>{
        return props.todos.reduce((pre,todo,index)=>pre+(todo.isChecked?1:0),0)
    })
   const checkedAll =computed({
        get(){
            return count.value> 0 && props.todos.length===count.value
        },
        set(val){
          props.checkAll(val)
        }
   })
   const removeData = ()=>{
       props.clearData()
   }
    return{
        count,
        checkedAll,
        removeData,
    }
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.todo-footer{
    label{
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }
}
button{
    margin-top: 5px;
    margin-left: 155px;
    border: none;
}
.btn-danger{
    background: #f00;
    outline: none;
    color: #fff;
    padding: 10px;

}
</style>
